<template>
    <div>
        <section class="content-header">应急事后&nbsp;/&nbsp;应急事后管理</section>

        <section class="main" style="margin-top:20px;">
            <div class="box">
                <!-- /.box-header -->
                <div class="box-body">
                    <table class="table table-bordered table-hover" style="font-size:14px">
                        <thead>
                            <tr>
                                <th style="width:25%;">事件</th>
                                <th style="width:15%;">创建时间</th>
                                <th style="width:25%;">事件描述</th>
                                <th style="width:10%;">片区</th>
                                <th style="width:10%;">责任人</th>
                                <th style="width:15%;">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in list" :key="item.value">
                                <td style="position: relative;">
                                    <div class="tr-left">
                                        <img
                                            :src="item.orderPhotopath && item.orderPhotopath.split(',')[0]"
                                            alt="未添加图片"
                                        >
                                    </div>
                                    <div class="tr-right">
                                        <p class="ordername">事件名称：{{item.orderName}}</p>
                                        <p>编号：{{item.orderId}}</p>
                                        <p>事件类别：{{item.orderType}}</p>
                                    </div>
                                </td>
                                <td>{{item.orderCreatedate}}</td>
                                <td>
                                    <p class="desc">{{item.orderDesc}}</p>
                                </td>
                                <td>{{item.orderArea}}</td>
                                <td>{{item.workorderDistribute&&item.workorderDistribute.distributePerson}}</td>
                                <td>
                                    <router-link :to="{path:'detailsLater',query:{orderId:item.orderId,status:1}}" style="margin-right:30px">查看</router-link>
                                    <router-link :to="{path:'detailsLater',query:{orderId:item.orderId,status:2}}">评价</router-link>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="col-md-4 col-md-offset-7" style="margin-top:50px;">
                        <ctrlPage :setPage="getList" :type="type" ref="page"/>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
        </section>
    </div>
</template>

<script>
import ctrlPage from "@/components/common/ctrlPage.vue";

export default {
    data() {
        return {
            type: "total, prev, pager, next, jumper",
            list: [],
            total: ""
        };
    },
    components: {
        ctrlPage
    },
    mounted() {
        this.$refs.page.getList(1);
    },
    methods: {
        //获取列表
        getList(pageIndex, pageSizes, callback) {
            this.$api.shihou
                .afterList({
                    pageNum: pageIndex || 1,
                    pageSize: pageSizes || 10
                })
                .then(res => {
                    if (res.success) {
                        this.list = res.data.list;
                        this.total = res.data.total;
                        callback(this.list, this.total);
                    }
                });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
table {
    text-align: center;
    .ordername {
        width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .desc {
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    th {
        text-align: center;
    }
    td {
        vertical-align: middle !important;
        padding: 20px 20px 40px 20px;
        position: relative;
    }
    .tr-left {
        float: left;
        margin-right: 20px;
        img {
            width: 75px;
            height: 75px;
        }
    }
    .tr-right {
        float: left;
        p {
            line-height: 25px;
            margin: 0;
            text-align: left;
        }
    }
    .line {
        width: 100%;
        height: 6px;
        background: #cccccc;
        float: left;
        border-radius: 5px;
        position: absolute;
        bottom: 25px;
        left: 0px;
    }
    .success {
        display: inline-block !important;
        background: #3c8dbc;
        i {
            background: #3c8dbc;
        }
        span {
            color: #3c8dbc;
        }
    }
    .line-status {
        //   display: none;
        display: inline-block;
        width: 100%;
        margin-top: 15px;
        text-align: center;
        color: #cccccc;
        background: #fff !important;
        font-weight: bold;
    }
    i {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #cccccc;
        line-height: 24px;
        color: white;
        position: absolute;
        top: -9px;
        left: 50%;
        margin-left: -11px;
    }
}
</style>
